<template>
  <div class="container">
    <el-dialog
        :title="title"
        :close-on-click-modal="false"
        :visible.sync="centerDialogVisible"
        width="50%"
    >
      <el-form label-position="left" label-width="150px">
        <el-form-item label="案件备注">
          <el-input
              style="width: 500px;"
              type="textarea"
              :rows="2"
              placeholder="请输入案件备注"
              v-model="form.remark">
          </el-input>
        </el-form-item>
        <!--        <el-form-item label="案件收藏分类" label-width="150px">-->
        <!--          <el-autocomplete-->
        <!--              class="inline-input"-->
        <!--              v-model="form.dirName"-->
        <!--              :fetch-suggestions="querySearch"-->
        <!--              placeholder="请输入内容"-->
        <!--              @select="handleSelect"-->
        <!--          ></el-autocomplete>-->
        <!--        </el-form-item>-->
        <el-form-item label="案件收藏分类">
          <div v-for="tag in form.dynamicTags" :key="tag" style="display: inline-flex; align-items: center;">
            <el-tag style="margin-left: 0.25rem;cursor: pointer;"
                    closable
                    @click="choseTag(tag)"
                    :effect="tag === currentSelectedTag ? 'dark' : 'plain'"
                    @close="handleClose(tag)">
              {{ tag.dirName }}
            </el-tag>
          </div>
          <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue"
                    style="margin-left: 0.25rem;width: 5rem;"
                    size="small"
                    @keyup.enter="handleInputConfirm" @blur="handleInputConfirm"/>
          <el-button v-else style="margin-left: 0.25rem;" size="small" @click="showInput">
            + 新增标签
          </el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="centerDialogVisible = false">取 消</el-button>
    <el-button size="mini" type="primary" @click="submitAdd" style="margin-left: 10px;">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/utils/api';
import {userSelect} from "@/api/userApi";
import {add} from '@/api/caseCollectApi'
import {addCaseDir} from '@/api/caseDirApi'
import {dirAdd, dirDelete, dirList} from '@/api/dirApi'

export default {
  components: {userSelect, add},
  mounted() {
  },
  data() {
    return {
      currentSelectedTag: null,
      inputValue: '',
      inputVisible: false,
      centerDialogVisible: false,
      node: {
        roleId: null,
        userId: null,
        parentId: null
      },
      title: '',
      caseId: '',
      handleRemark: '',
      pushUserId: null,
      roleId: null,
      userId: null,
      roleOptions: [],
      userOptions: [],
      form: {
        caseId: null,
        userId: this.$globalUserId,
        remark: '',
        dirId: '',
        dynamicTags: []
      },
      restaurants: []
    }
  },
  methods: {
    choseTag(tag) {
      this.currentSelectedTag = tag; // 更新当前选中的标签
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.InputRef.focus();
      });
    },
    handleClose(tag) {
      const self = this
      const obj = {}
      obj.id = tag.id
      dirDelete(obj).then(data => {
        if (data.code == 200) {
          self.$message({
            type: "success",
            message: data.msg,
          });
          self.getDirList()
        }
      })

    },
    handleInputConfirm() {
      if (this.inputValue) {
        const self = this
        const obj = {}
        obj.dirName = this.inputValue
        obj.userId = this.$globalUserId
        dirAdd(obj).then(data => {
          if (data.code == 200) {
            self.$message({
              type: "success",
              message: data.msg,
            });
            self.getDirList()
          }
        })
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    getDirList() {
      dirList({
        id: this.$globalUserId,
      }).then(data => {
        if (data.code == 200) {
          this.form.dynamicTags = data.data
        }
      })
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(this.restaurants);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    dirSelectListEvent() {
      api.dirSelect({
        userId: this.form.userId
      }).then(result => {
        if (result.code == 200) {
          this.restaurants = result.data
        }
      })
    },

    open(data) {
      this.centerDialogVisible = true
      this.title = data.title
      this.form.caseId = data.caseId
      this.getDirList()
    },
    clear() {
      this.form.caseId = null
      this.form.userId = null
      this.form.dirId = ''
      this.form.remark = ''
      this.form.dynamicTags = []
      console.log(this.form)
    },
    submitAdd() {
      const self = this
      self.form.userId = this.$globalUserId
      self.form.dirId = this.currentSelectedTag.id
      addCaseDir(self.form).then((data) => {
        if (data.code == 200) {
          self.$message({
            type: "success",
            message: data.msg,
          });
          self.centerDialogVisible = false;
          self.clear()
          self.$emit("afterSubmit");
        } else {
          self.$message.error(data.msg);
        }
      })
    }
  }
};
</script>
<style scoped>
.el-form-item {
  margin-bottom: 10px;
}


</style>